<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<script>var ctx="${ctx}";</script>
<style>
.row input{
	margin-top: 5px;
}
.row select{
	margin-top: 5px;
}
/*profile*/
.user-heading {
	border-radius: 4px 4px 0 0;
	-webkit-border-radius: 4px 4px 0 0;
	text-align: center;
}

.user-heading img {
	width: 112px;
	height: 112px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	border: 10px solid rgba(255, 255, 255, 0.3);
	display: inline-block;
}

.user-heading h1 {
	font-size: 22px;
	font-weight: 300;
	margin-bottom: 5px;
}

.user-heading p {
	font-size: 12px;
}
</style>
<div id="myFormImage" enctype="multipart/form-data" target="hidden_frame" class="form-horizontal" role="form" >
	<input type="hidden" id="token" name="token" value="<%=request.getAttribute("token") %>" />
	<input id="user-id" value="${sysUser.id}"  type="hidden" />
	<div class="user-heading">
		<input type="file" class="file-pos" id="user-avatar" name="imageFile" style="display: none;">
		<img id="myImageFile" src="${sysUser.image}" alt="">
	</div>
	<div class="form-group">
 	    <label class="col-md-3 col-sm-3 control-label">姓名:</label>
        <div class="col-md-9">
       	    <input id="fullname" value="${sysUser.fullname}"  data-check="require:true;code:^[a-zA-Z0-9\u4e00-\u9fa5]{1,30};message:不能为空"  type="text" placeholder="姓名" class="form-control" name="fullname"/>
        </div>
    </div>
    <div class="form-group">
 	    <label class="col-md-3 col-sm-3 control-label">登录用户名:</label>
        <div class="col-md-9">
       	    <input id="username" value="${sysUser.username}" data-check="require:true;code:^[a-zA-Z0-9\u4e00-\u9fa5]{1,30};message:不能为空" type="text" placeholder="登录用户名" class="form-control" name="username"/>
        </div>
    </div>
    <div class="form-group">
 	    <label class="col-md-3 col-sm-3 control-label">手机号:</label>
        <div class="col-md-9">
       	    <input id="phone" value="${sysUser.phone}"  data-check="require:true;code:^[0-9]{1,12};message:不能为空" type="text" placeholder="手机号" class="form-control" name="phone"/>
        </div>
    </div>
    <div class="form-group">
 	    <label class="col-md-3 col-sm-3 control-label">用户角色:</label>
        <div class="col-md-9">
        	<select id="roleIds" data-placeholder="选择用户角色" class="chosen-select full-width" multiple  tabindex="4">
			</select>
        </div>
    </div>
    <div class="form-group">
 	    <label class="col-md-3 col-sm-3 control-label">所属部门:</label>
        <div class="col-md-9">
        	<select id="departmentId" placeholder="选择所属部门" style="width:200px"  tabindex="4">
            </select>
        </div>
    </div>
    <div class="form-group">
 		<label class="col-md-3 col-sm-3 control-label">性别:</label>
        <div class="col-md-9">
        	<div class="form-inline" >
        	<div class="checkbox i-checks">
                 <label><input type="radio"  name="gender" id="gender_famale" value="1" <c:if test="${sysUser.gender==1}">checked="checked"</c:if>> <i></i>男</label>
             </div>
             <div class="checkbox i-checks">
                 <label><input type="radio"  name="gender" id="gender_male" value="2" <c:if test="${sysUser.gender==2}">checked="checked"</c:if>> <i></i>女</label>
             </div>
            </div>
        </div>
    </div>
</div>
<iframe style="display: none" name='hidden_frame' id="hidden_frame"></iframe>
<script>


$(function(){
	jQuery.checkall(false);
	
    var combotree=$('#departmentId').combotree({url: '${ctx}/department/findTreeData'}); 
    combotree.combotree('setValue','${sysUser.departmentId}');  
	
})

	var roleIds=[];
	var roleIds_="${sysUser.roleIds}";
	if(roleIds_!=null && roleIds_!=""){
		roleIds=roleIds_.split(",");
	}else{
	    roleIds=null;
	}
	
	$("#roleIds").chosen({ width: '100%' });
	
	$.ajax({  
		url:'${ctx}/role/list',  		 					
		type: 'POST',
		dataType:'json',  
		success:function(response){
			if(response.code==0){
				var html=[];
				var data=response.data||[];
				for(var i=0;i<data.length;i++){
					html.push('<option value="'+data[i].id+'" ');
					html.push('>'+data[i].name+'</option>');
				}
				$("#roleIds").html(html.join(""));
				$("#roleIds").val(roleIds);
				$("#roleIds").trigger("chosen:updated");
			}
		}  
     });
	
	 $(function(){
		 
		 jQuery.checkall(false); 
		 
		$(".i-checks").iCheck('destroy');
		$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green"});	 

		$('#myImageFile').click(function() {
			$("#user-avatar").click();
		});
		
		$('#user-avatar').change(function(){
			$("#myFormImage").attr("target", "hidden_frame");
			var name = $("#user-avatar").val().split(".");
			var imageName = name[name.length - 1];
			if (imageName != "gif" && imageName != "GIF"
					&& imageName != "jpg" && imageName != "JPG"
					&& imageName != "JPEG" && imageName != "JPEG"
					&& imageName != "png" && imageName != "PNG") {
				$.notify("温馨提示", "图片必须为gif,jpeg,jpg,png格式");
				return;
			}
			var action = $("#myFormImage").attr("action");
			$("#myFormImage").attr("action", ctx + "/file/iframeUpload");
			document.getElementById("myFormImage").submit();
			$("#myFormImage").attr("target", "");
		});
	})
	function imageCallback(message, success) {
		if (success == false) {
			$.notify("温馨提示", "图片必须为gif,jpeg,jpg,png格式");
		} else {
			var url = decodeURIComponent(message);
			$("#myFormImage").append('<input name="imageUrl" type="hidden" value="'+url+'"/></td>');
			$("#myImageFile_").attr("src", url);
		}
	}
	
</script>
